<template>
	<vCommonPage type="1" title="医院简介" class="choseKsAndDoctor">
		<div slot="customContent" class="content yyjjHome">
			<div class="typeChoseBox">
				<div class="leftBox" @click="clickOrdinaryBtn(true)">
					科室简介
					<div v-if="clickOrdinary" class="leftBoxBottom"></div>
				</div>
				<div class="rhightBox" @click="clickOrdinaryBtn(false)">
					医生简介
					<div v-if="!clickOrdinary" class="rhightBoxBottom"></div>
				</div>
			</div>
			<div class="centerBox" v-show="clickOrdinary">
				<div class="centerTopBox">
					<div class="title">
						{{deptData.deptName}}简介
					</div>
					<img v-if="deptData.icon" :src="deptData.icon" class="centerTopBoxIcon" />
					<div class="centerText">
						{{deptData.description}}
					</div>
				</div>
			</div>
			<div class="ysjjBox" v-show="!clickOrdinary">
				<div class="ysjjBoxItem"
					v-for="(item,index) in doctorList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
					<div class="leftBox" @click="showDoctorBox(item)">
						<img class="ysjjImg" :src="item.avatarUrl?item.avatarUrl:imgUrl" />
					</div>
					<div class="rightBox">
						<div class="rightTitle" @click="showDoctorBox(item)">
							<div class="oneTitle">{{item.doctorName}}</div>
							<div class="secTitle">{{item.deptName}}</div>
							<div class="secTitle">{{item.docPost}}</div>
							<div class="thirdTitle">{{item.title}}</div>
						</div>
						<div class="contentText" @click="showDoctorBox(item)">
							{{item.represent}}
						</div>
						<div class="bottomBtnBox">
							<!-- 							<el-button class="ghBtn" @click="yyGhClick(item,'mzgh')">挂号</el-button>
							<el-button class="yyBtn" @click="yyGhClick(item,'mzyy')">预约</el-button> -->
						</div>
					</div>
				</div>




			</div>

			<div :class="clickOrdinary?'bottomBox fixedBottom':'bottomBox'"
				style="display: flex; justify-content: space-between;">
				<div>
					<el-button class="BtnTextHome" type="primary" @click="goBack()">返回</el-button>
					<el-button class="BtnTextHome" type="primary" @click="goBackHome()">首页</el-button>
				</div>
				<div style="display: flex;align-items: center;" v-show="!clickOrdinary">
					<el-button v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'"
						@click="prePage()">
						上一页
					</el-button>
					<div class="pageBox" v-show="totalPage>1">
						<div class="curentPage">{{currentPage}}</div>
						/
						<div class="totalPage">{{totalPage}}</div>
					</div>
					<el-button v-show="totalPage>1" :class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'"
						@click="nextPage()">
						下一页
					</el-button>
				</div>
			</div>




			<transition name="el-fade-in-linear">
				<div class="doctorBox" v-show="doctorDetailShow">
					<div class="tipBoxTopClose el-icon-close" @click="hiddenDoctorDetail()"></div>
					<div class="doctorTopBox">
						<img   :src="doctorInfo.avatarUrl?doctorInfo.avatarUrl:imgUrl" class="doctorTopBoxImg" />
						<div class="infoBox">
							<div class="infoItem">
								<span class="infoLeft">姓名：</span>
								<span class="infoRight">{{doctorInfo.doctorName}}</span>
							</div>
							<div class="infoItem">
								<span class="infoLeft">科室：</span>
								<span class="infoRight">{{doctorInfo.deptName}}</span>
							</div>
							<div class="infoItem">
								<span class="infoLeft">职称：</span>
								<span class="infoRight">{{doctorInfo.title}}</span>
							</div>
						</div>
					</div>
					<div class="contentClass">
						{{doctorInfo.goodAt}}
					</div>
				</div>
			</transition>

			<div v-show="doctorDetailShow" @click="hiddenDoctorDetail()" class="yiny"></div>
		</div>

	</vCommonPage>
</template>

<script>
	import {
		getDeptDownDoctors
	} from "@api/apiBox/yyjj"
	export default {
		data() {
			return {
				clickOrdinary: true,
				currentPage: 1, //初始页
				pagesize: 2, //    每页的数据
				totalPage: 0,
				doctorList: [],
				//医生详情弹窗
				doctorDetailShow: false,
				doctorInfo: {},
				deptData: '',
				imgUrl: require('../../assets/images/yyjj/touxiang.png')
			}
		},
		methods: {
			clickOrdinaryBtn(state) {
				this.clickOrdinary = state;
			},
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			}, //页码数初始化
			async initPage() {
				this.currentPage = 1;
				let data = {
					data: {
						deptId: this.deptData.deptId
					},
					that: this
				}
				const res = await getDeptDownDoctors(data);
				console.log(res, '医生简介')
				this.doctorList = res.data;
				this.totalPage = parseInt((this.doctorList.length + this.pagesize - 1) / this.pagesize)

			},
			showDoctorBox(data) {
				this.doctorDetailShow = true;
				this.doctorInfo = data;
			},
			hiddenDoctorDetail() {
				this.doctorDetailShow = false;
			},
			yyGhClick(item, type) {
				console.log(item, 'tt', type)
				//存储选择的科室信息
				this.$store.dispatch("yyjj/updateDeptId", item.deptId); //存储科室ID信息
				this.$store.dispatch("yyjj/updateDoctorId", item.doctorId); //存储医生ID信息
				if (type == 'mzgh') {
					this.$router.push({
						name: 'xzskfs',
						query: {
							pageName: type,
							name: '门诊挂号'
						},
					});

				} else if (type == 'mzyy') {
					this.$router.push({
						name: 'xzskfs',
						query: {
							pageName: type,
							name: '门诊预约'
						},
					});

				}
			}

		},
		created() {
			this.deptData = JSON.parse(this.$route.query.deptData);
			this.initPage();
		}
	}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
	@media (min-height: 0px) and (max-height: 1910px) {
		.centerBox {
			margin-top: 30px;
			margin-left: 30px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			padding: 34px;
			width: 914px;
			height: 34rem;
			overflow: auto;
			padding-top: 20px;
		}
	}

	@media (min-height: 1919px) {
		.centerBox {
			margin-top: 30px;
			margin-left: 30px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			padding: 34px;
			width: 914px;
			height: 38rem;
			overflow: auto;
			padding-top: 20px;
		}
	}

	.centerTopBox {
		margin-bottom: 38px;

		.title {
			text-align: center;
			border-radius: 8px;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #57A8FF;
		}

		.centerText {
			text-indent: 2em;
			font-size: 28px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-top: 12px;
		}

		.centerTopBoxIcon {
			object-fit: contain;
			width: 60%;
			height: 14.25rem;
			margin-left: 20%;
			margin-top: 10px;
		}
	}

	.typeChoseBox {
		display: flex;
		justify-content: center;
		font-size: 3vw;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #435C7A;
		margin-top: 20px;

		.leftBox {
			margin-right: 0.625rem;
			text-align: center;

			.leftBoxBottom::after {
				content: '';
				width: 40%;
				height: 8px;
				border-radius: 4px;
				display: block;
				margin: 0 auto;
				background: #46C349;
				margin-top: 10px;
			}
		}

		.rhightBox {
			text-align: center;
			margin-left: 0.625rem;

			.rhightBoxBottom::after {
				content: '';
				width: 40%;
				display: block;
				margin: 0 auto;
				background: #46C349;
				height: 8px;
				border-radius: 4px;
				margin-top: 10px;
			}
		}
	}

	.ysjjBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding-top: 10px;

		.ysjjBoxItem {
			padding: 22px;
			width: 938px;
			height: 196px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			margin-top: 20px;
			display: flex;

			.leftBox {
				width: 155.1px;
				height: 100%;

				.ysjjImg {
					width: 155.1px;
					height: 100%;

				}
			}

			.rightBox {
				width: 738px;
				height: 100%;
				padding-left: 23px;

				.rightTitle {
					height: 48px;
					width: 100%;
					display: flex;
					overflow: hidden;
					text-overflow: ellipsis;
					align-items: center;

					.oneTitle {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #435C7A;
						margin-right: 26px;
					}

					.secTitle {
						font-size: 26px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A5B0BD;
						margin-right: 34px;
					}

					.thirdTitle {
						font-size: 26px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A5B0BD;
					}
				}

				.contentText {
					margin-top: 10px;
					font-size: 26px;
					height: 117px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis; //显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 3; //块元素显示的文本行数
					-webkit-box-orient: vertical;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #435C7A;
					word-wrap: break-word;
					/*省略号 */
					// white-space: nowrap;
				}

				.bottomBtnBox {
					width: 100%;

					.ghBtn {
						margin-left: 515px;
						width: 100px;
						height: 60px;
						background: #57A8FF;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

					.yyBtn {
						margin-left: 20px;
						width: 100px;
						height: 60px;
						background: #46C349;
						box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
						border-radius: 8px;
						font-size: 28px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}

		}
	}



	.doctorBox {
		position: fixed;
		bottom: 9.375rem;
		width: 790px;
		height: 578px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		left: calc(50% - 435px);
		z-index: 3;
		padding: 40px;

		.contentClass {
			width: 100%;
			overflow: auto;
			height: 296px;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-top: 29px;
			text-indent: 2em;
			word-wrap: break-word;
		}

		.tipBoxTopClose {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 50px;
			height: 50px;
			background: #57A8FF;
			border-radius: 6px;
			font-size: 30px;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.doctorTopBox {
			width: 100%;
			height: 214px;
			display: flex;
			margin-top: 30px;

			.doctorTopBoxImg {
				width: 180px;
				height: 214px;
			}

			.infoBox {
				width: calc(100% - 200px);
				margin-left: 34px;
				padding-bottom: 5px;

				.infoItem {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 6px;

					.infoLeft {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #A1ADBB;
					}

					.infoRight {
						font-size: 32px;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #435C7A;
					}
				}


			}
		}
	}
</style>

<style>
	@media (min-height: 0px) and (max-height: 1910px) {
		.fixedBottom {
			bottom: 45px !important;
		}
	}

	@media (min-height: 1919px) {
		.fixedBottom {
			bottom: 30px !important;
		}

		.choseKsAndDoctor .bttomBox {
			align-items: flex-start;


		}

		.choseKsAndDoctor .el-main {
			margin-top: 10.5rem;

		}

		.choseKsAndDoctor .el-row-vertical {
			align-items: flex-start;
		}

	}
</style>
